<template>
  <el-col
    v-if="widget.type === 'grid-col'"
    class="grid-cell"
    v-bind="layoutProps"
    :class="[selected ? 'selected' : '', customClass]"
    :style="colHeightStyle"
    :key="widget.id"
    @click.native.stop="selectWidget(widget)"
  >
    <draggable
      :list="widget.widgetList"
      v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
      handle=".drag-handler"
      @end="(evt) => onGridDragEnd(evt, widget.widgetList)"
      @add="(evt) => onGridDragAdd(evt, widget.widgetList)"
      @update="onGridDragUpdate"
      :move="checkContainerMove"
    >
      <transition-group name="fade" tag="div" class="form-widget-list">
        <template v-for="(subWidget, swIdx) in widget.widgetList">
          <template v-if="'container' === subWidget.category">
            <component
              :is="subWidget.type + '-widget'"
              :widget="subWidget"
              :designer="designer"
              :key="subWidget.id"
              :parent-list="widget.widgetList"
              :index-of-parent-list="swIdx"
              :parent-widget="widget"
            ></component>
          </template>
          <template v-else>
            <component
              :is="subWidget.type + '-widget'"
              :field="subWidget"
              :designer="designer"
              :key="subWidget.id"
              :parent-list="widget.widgetList"
              :index-of-parent-list="swIdx"
              :parent-widget="widget"
              :design-state="true"
            ></component>
          </template>
        </template>
      </transition-group>
    </draggable>

    <div class="grid-col-action" v-if="designer.selectedId === widget.id && widget.type === 'grid-col'">
      <i
        class="el-icon-back"
        :title="i18nt('designer.hint.selectParentWidget')"
        @click.stop="selectParentWidget(widget)"
      ></i>
      <i
        class="el-icon-top"
        v-if="!!parentList && parentList.length > 1"
        :title="i18nt('designer.hint.moveUpWidget')"
        @click.stop="moveUpWidget()"
      ></i>
      <i
        class="el-icon-bottom"
        v-if="!!parentList && parentList.length > 1"
        :title="i18nt('designer.hint.moveDownWidget')"
        @click.stop="moveDownWidget()"
      ></i>
      <i
        class="el-icon-copy-document"
        :title="i18nt('designer.hint.cloneWidget')"
        @click.stop="cloneGridCol(widget)"
      ></i>
      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget(widget)"></i>
    </div>

    <div class="grid-col-handler" v-if="designer.selectedId === widget.id && widget.type === 'grid-col'">
      <i>{{ i18nt('designer.widgetLabel.' + widget.type) }}</i>
    </div>
  </el-col>
</template>

<script>
import Draggable from 'vuedraggable'
import i18n from '@/utils/i18n'
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from '@/components/form-designer/refMixinDesign'
import containerMixin from '@/components/form-designer/form-widget/container-widget/containerMixin'

export default {
  name: 'GridColWidget',
  componentName: 'GridColWidget',
  mixins: [i18n, refMixinDesign, containerMixin],
  inject: ['refList'],
  components: {
    Draggable,
    ...FieldComponents
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    colHeight: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      layoutProps: {
        span: Number(this.widget.options.span) || 12,
        // 样式错误注释下三行
        md: Number(this.widget.options.md) || 12,
        sm: Number(this.widget.options.sm) || 12,
        xs: Number(this.widget.options.xs) || 12,
        offset: Number(this.widget.options.offset) || 0,
        push: Number(this.widget.options.push) || 0,
        pull: Number(this.widget.options.pull) || 0
      }
    }
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },

    colHeightStyle() {
      return !!this.colHeight ? { height: this.colHeight + 'px' } : {}
    }
  },
  watch: {
    'designer.formConfig.layoutType': {
      handler(val) {
        if (!!this.widget.options.responsive) {
          if (val === 'H5') {
            this.layoutProps.span = Number(this.widget.options.xs) || 12
          } else if (val === 'Pad') {
            this.layoutProps.span = Number(this.widget.options.sm) || 12
          } else {
            this.layoutProps.span = Number(this.widget.options.md) || 12
          }
        } else {
          this.layoutProps.span = Number(this.widget.options.span) || 12
        }
      }
    },

    'widget.options.responsive': {
      handler(val) {
        let lyType = this.designer.formConfig.layoutType
        if (!!val) {
          if (lyType === 'H5') {
            this.layoutProps.span = this.widget.options.xs || 12
          } else if (lyType === 'Pad') {
            this.layoutProps.span = this.widget.options.sm || 12
          } else {
            this.layoutProps.span = this.widget.options.md || 12
          }
        } else {
          this.layoutProps.span = Number(this.widget.options.span) || 12
        }
      }
    },

    'widget.options.span': {
      handler(val) {
        this.layoutProps.span = Number(val)
      }
    },

    'widget.options.md': {
      handler(val) {
        this.layoutProps.span = Number(val)
      }
    },

    'widget.options.sm': {
      handler(val) {
        this.layoutProps.span = Number(val)
      }
    },

    'widget.options.xs': {
      handler(val) {
        this.layoutProps.span = Number(val)
      }
    },

    'widget.options.offset': {
      handler(val) {
        this.layoutProps.offset = Number(val)
      }
    },

    'widget.options.push': {
      handler(val) {
        this.layoutProps.push = Number(val)
      }
    },

    'widget.options.pull': {
      handler(val) {
        this.layoutProps.pull = Number(val)
      }
    }
  },
  created() {
    this.initRefList()
    this.initLayoutProps()
  },
  methods: {
    initLayoutProps() {
      if (!!this.widget.options.responsive) {
        let lyType = this.designer.formConfig.layoutType
        if (lyType === 'H5') {
          this.layoutProps.span = Number(this.widget.options.xs) || 12
        } else if (lyType === 'Pad') {
          this.layoutProps.span = Number(this.widget.options.sm) || 12
        } else {
          this.layoutProps.span = Number(this.widget.options.md) || 12
        }
      } else {
        this.layoutProps.span = Number(this.widget.options.span)
      }
    },

    onGridDragEnd(evt, subList) {
      //
    },

    onGridDragAdd(evt, subList) {
      const newIndex = evt.newIndex
      if (!!subList[newIndex]) {
        this.designer.setSelected(subList[newIndex])
        this.designer.setNamesList(subList[newIndex])
      }

      this.designer.emitHistoryChange()
      this.designer.emitEvent('field-selected', this.widget)
    },

    onGridDragUpdate() {
      this.designer.emitHistoryChange()
    },

    selectWidget(widget) {
      this.designer.setSelected(widget)
    },

    checkContainerMove(evt) {
      return this.designer.checkWidgetMove(evt)
    },

    selectParentWidget() {
      if (this.parentWidget) {
        this.designer.setSelected(this.parentWidget)
      } else {
        this.designer.clearSelected()
      }
    },

    moveUpWidget() {
      this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
    },

    moveDownWidget() {
      this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
    },

    cloneGridCol(widget) {
      this.designer.cloneGridCol(widget, this.parentWidget)
    }

    // removeWidget() {
    //   if (!!this.parentList) {
    //     let nextSelected = null
    //     if (this.parentList.length === 1) {
    //       if (!!this.parentWidget) {
    //         nextSelected = this.parentWidget
    //       }
    //     } else if (this.parentList.length === 1 + this.indexOfParentList) {
    //       nextSelected = this.parentList[this.indexOfParentList - 1]
    //     } else {
    //       nextSelected = this.parentList[this.indexOfParentList + 1]
    //     }

    //     this.$nextTick(() => {
    //       this.parentList.splice(this.indexOfParentList, 1)
    //       //if (!!nextSelected) {
    //       this.designer.setSelected(nextSelected)
    //       //}

    //       this.designer.emitHistoryChange()
    //     })
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.grid-cell {
  min-height: 38px;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  padding: 3px;
  outline: 1px dashed #dcdfe6;
  position: relative;

  .form-widget-list {
    min-height: 28px;
  }

  .grid-col-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: #409eff;
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .grid-col-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: #409eff;
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: default;
    }
  }
}
</style>
@/utils/i18ns
